<template>
  <view class="">
    <view class="example">
      <view class="">
        <p class="gray_font titleTips">
          此信息仅您和医生可见。
          <br />
          为准确的医疗服务，请您务必填写真实资料。
          <br />
          一旦信息建立，无法删除，请确认无误后提交
        </p>
      </view>
      <!-- 基础表单校验 -->
      <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
        <view class="formInfo pad30">
          <uni-forms-item label="真实姓名" required name="name">
            <uni-easyinput
              v-model="valiFormData.name"
              :inputBorder="false"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="身份证号" required name="idCard">
            <uni-easyinput
              type="idcard"
              v-model="valiFormData.idCard"
              :inputBorder="false"
              placeholder="请输入身份证号"
            />
          </uni-forms-item>
        </view>

        <view class="formInfo pad30">
          <uni-forms-item label="手机号" required name="phone">
            <uni-easyinput
              type="number"
              v-model="valiFormData.phone"
              :inputBorder="false"
              placeholder="请输入手机号"
            />
          </uni-forms-item>
          <uni-forms-item label="验证码" required name="verifyCode">
            <view class="" style="margin-top: 16rpx; margin-left: 18rpx;">
              <input
                style="width: 60%; float: left;"
                type="text"
                value=""
                v-model="valiFormData.verifyCode"
                :inputBorder="false"
                placeholder="填写验证码"
              />
              <text class="sendCode" @click.stop="getMessageCode">
                {{ getCodeText || '发送验证码' }}
              </text>
            </view>
          </uni-forms-item>
        </view>
        <view class="formInfo pad30">
          <uni-forms-item required label="家庭住址" name="permanentAddress">
            <view
              class="ui-list right"
              style="padding-left: 6px; padding-top: 9px;"
            >
              <view class="input" type="text" placeholder="">
                <picker
                  mode="multiSelector"
                  range-key="title"
                  :range="newProvinceDataList"
                  :value="multiIndex"
                  @change="
                    pickerChange('permanentAddress', $event.detail.value)
                  "
                  @columnchange="pickerColumnchange"
                  @click="clickArea"
                >
                  <view class="picker">
                    {{
                      valiFormData.permanentAddress
                        ? valiFormData.permanentAddress
                        : '请选择家庭住址'
                    }}
                  </view>
                </picker>
              </view>
            </view>
          </uni-forms-item>
        </view>
        <view class="formInfo pad30">
          <uni-forms-item label="关系" name="relation">
            <picker
              mode="selector"
              range-key="dictLabel"
              :value="relationId"
              :range="relationList"
              v-model="valiFormData.relation"
              @change="changeRelation('relation', $event.detail.value)"
            >
              <view
                class="picker"
                style="margin-top: 16rpx; margin-left: 18rpx;"
              >
                {{ valiFormData.relation ? relationValue : '请选择关系' }}
              </view>
            </picker>
          </uni-forms-item>
        </view>
      </uni-forms>
      <p class="gray_font" style="font-size: 25rpx; padding: 10rpx 0 0 30rpx;">
        与就诊人关系可修改
      </p>
      <button
        :disabled="extraction"
        class="arc_button btn_appointment"
        type="primary"
        @click="submit('valiForm')"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script>
import address from '@/static/json/allAddress.json'
import { addPatient, getCode, checkNameId } from '@/api/my.js'
import { getDicts } from '@/api/common.js'
export default {
  data() {
    return {
      extraction: false,
      getCodeText: '发送验证码',
      disabled: false,
      time: 60,
      valiFormData: {
        name: '',
        idCard: '',
        phone: '',
        verifyCode: '',
        relation: 0,
        permanentAddress: '', //家庭住址
      },
      relationList: [], //关系列表
      relationId: 0,
      relationValue: '', //
      sexId: 0,
      sexValue: '', //男女
      newProvinceDataList: [[], [], []],
      address: [], //
      select: '',
      multiIndex: [0, 0, 0], //省市区下标
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: '姓名不能为空',
            },
          ],
        },
        idCard: {
          rules: [
            {
              required: true,
              errorMessage: '身份证号不能为空',
            },
          ],
        },
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '手机号不能为空',
            },
          ],
        },
        verifyCode: {
          rules: [
            {
              required: true,
              errorMessage: '验证码不能为空',
            },
          ],
        },
        permanentAddress: {
          rules: [
            {
              required: true,
              errorMessage: '家庭住址不能为空',
            },
          ],
        },
      },
    }
  },
  onLoad() {
    // 获取关系字典
    this.getRelation()
    // this.valiFormData.birthTime = this.date;
    for (let i = 0; i < address.length; i++) {
      this.newProvinceDataList[0].push({
        title: address[i].title,
        id: address[i].id,
      })
    }
    for (let i = 0; i < address[0].children.length; i++) {
      this.newProvinceDataList[1].push({
        title: address[0].children[i].title,
        id: address[0].children[i].id,
      })
    }
    for (let i = 0; i < address[0].children[0].children.length; i++) {
      this.newProvinceDataList[2].push({
        title: address[0].children[0].children[i].title,
        id: address[0].children[0].children[i].id,
      })
    }
  },
  methods: {
    clickArea(e) {},
    // 省市区确认事件
    pickerChange(name, value) {
      this.multiIndex = value
      this.$refs.valiForm.setValue(name, value)
      // console.log(this.multiIndex, '999----')
      // 数组内的下标
      // console.log(this.multiIndex);
      // 获取省
      // console.log(this.newProvinceDataList[0][this.multiIndex[0]], this.newProvinceDataList[1][this.multiIndex[1]],
      // 'this.newProvinceDataList[0]999---选中的id')
      // 获取市
      // console.log(this.newProvinceDataList[1][this.multiIndex[1]])
      // 获取区
      // console.log(this.newProvinceDataList[2][this.multiIndex[2]])
      // 省市区名称
      this.select = `${this.newProvinceDataList[0][this.multiIndex[0]].title},${
        this.newProvinceDataList[1][this.multiIndex[1]].title
      },${this.newProvinceDataList[2][this.multiIndex[2]].title}`

      this.valiFormData.permanentAddress = this.select
      console.log(this.select, this.valiFormData.permanentAddress, '999---->>>')
      // 获取到省市区id
      this.valiFormData.province = this.newProvinceDataList[0][
        this.multiIndex[0]
      ].id
      this.valiFormData.city = this.newProvinceDataList[1][
        this.multiIndex[1]
      ].id //市id
      this.valiFormData.district = this.newProvinceDataList[2][
        this.multiIndex[2]
      ].id //区id
    },
    pickerColumnchange(e) {
      // this.multiIndex = [0,0,0];
      // 第几列滑动
      // console.log(e.detail.column);
      // 第几列滑动的下标
      // console.log(e.detail.value)
      // 第一列滑动
      if (e.detail.column === 0) {
        this.multiIndex[0] = e.detail.value
        // console.log('第一列滑动');
        this.newProvinceDataList[1] = address[this.multiIndex[0]].children.map(
          (item, index) => {
            return item
          },
        )
        if (address[this.multiIndex[0]].children.length === 1) {
          this.newProvinceDataList[2] = address[
            this.multiIndex[0]
          ].children[0].children.map((item, index) => {
            return item
          })
        } else {
          this.newProvinceDataList[2] = address[this.multiIndex[0]].children[
            this.multiIndex[1]
          ].children.map((item, index) => {
            return item
          })
        }
        // 第一列滑动  第二列 和第三列 都变为第一个
        this.multiIndex.splice(1, 1, 0)
        this.multiIndex.splice(2, 1, 0)
      }
      // 第二列滑动
      if (e.detail.column === 1) {
        this.multiIndex[1] = e.detail.value
        // console.log('第二列滑动');
        this.newProvinceDataList[2] = address[this.multiIndex[0]].children[
          this.multiIndex[1]
        ].children.map((item, index) => {
          // console.log(item,999,'第二列华东的item')
          return item
        })
        // 第二列 滑动 第三列 变成第一个
        this.multiIndex.splice(2, 1, 0)
      }
      // 第三列滑动
      if (e.detail.column === 2) {
        this.multiIndex[2] = e.detail.value
      }
    },

    // 获取关系数据
    getRelation() {
      uni.showLoading({
        title: '加载中',
      })
      // 查询关系字典
      getDicts({
        dictType: 'xy_relation_type',
      })
        .then((res) => {
          console.log(res, '字典关系9--')
          this.relationList = res.data
          uni.hideLoading()
        })
        .catch((err) => {
          uni.hideLoading()
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 3000,
          })
        })
    },
    changeRelation(name, value) {
      this.$refs.valiForm.setValue(name, value)
      this.valiFormData.relation = this.relationList[value].dictValue
      this.relationValue = this.relationList[value].dictLabel
    },
    // 校验身份证
    isIdCard(card) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(card.target.value) === false) {
        // alert("身份证输入不合法");
        this.$util.Tips({
          title: '身份证输入不合法',
        })
        return false
      }
    },
    // 获取验证码
    getMessageCode() {
      let _this = this
      if (!_this.valiFormData.phone) {
        return _this.$util.Tips({
          title: '请填写手机号码',
          icon: 'none',
          duration: 3000,
        })
      }
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(_this.valiFormData.phone)) {
        return _this.$util.Tips({
          title: '请输入正确的手机号码',
          icon: 'none',
          duration: 3000,
        })
      }
      uni.showLoading({
        title: '加载中',
      })
      getCode({
        phone: _this.valiFormData.phone,
        messageType: 'patient',
      })
        .then((res) => {
          console.log(res, '9999验证码res')
          if (res.code == 200) {
            _this.setTime()
          }
          uni.showToast({
            title: res.msg,
            duration: 3000,
          })
          uni.hideLoading()
        })
        .catch((err) => {
          uni.hideLoading()
          console.log(err, '获取验证码err')
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 3000,
          })
        })
    },
    setTime() {
      let _this = this
      if (_this.time == 0) {
        _this.time = 60
        _this.getCodeText = `获取验证码`
        _this.disabled = false
      } else {
        _this.disabled = true
        _this.getCodeText = `重新发送(${_this.time}s)`
        _this.time--
        setTimeout(function () {
          _this.setTime()
        }, 1000)
      }
    },

    submit(ref) {
      this.$refs[ref].validate((valid) => {
        if (valid == null) {
          console.log(this.valiFormData, '入参信息999---')
          if (!this.valiFormData.permanentAddress) {
            return uni.showToast({
              title: '请选择家庭住址',
              icon: 'none',
              duration: 3000,
            })
          }
          // this.isIdCard(this.valiFormData.idCard)
          this.extraction = true
          uni.showLoading({
            title: '加载中',
          })
          this.valiFormData.messageType = 'patient'
          // console.log(this.valiFormData, '入参信息999---');
          // return;
          addPatient(this.valiFormData)
            .then((res) => {
              uni.hideLoading()
              if (res.code == 200) {
                // 跳转到就诊人列表
                // uni.redirectTo({
                //     url:'/pages/homePage/prescribing/addPeople'
                // })
                uni.navigateBack({
                  delta: 1,
                })
                this.extraction = false
              }
              console.log(res, '添加就诊人')
            })
            .catch((err) => {
              uni.hideLoading()
              uni.showToast({
                title: err,
                icon: 'none',
                duration: 3000,
              })
              this.extraction = false
            })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/.uni-forms-item__label.data-v-61dfc0d0 {
  width: 170rpx !important;
}

/deep/.uni-forms-item__label .label-text.data-v-61dfc0d0 {
  font-size: 32rpx;
  color: #333;
}

/deep/.uni-easyinput__content-input.data-v-abe12412 {
  font-size: 31rpx;
}

/deep/.uni-forms-item__content.data-v-61dfc0d0 {
  font-size: 31rpx;
}

.titleTips {
  font-size: 25rpx;
  line-height: 34rpx;
  padding: 30rpx;
}

.formInfo {
  background-color: #ffffff;
  margin-bottom: 10rpx;
  padding: 30rpx 30rpx 0;
}

.sendCode {
  color: #4cd964;
  cursor: pointer;
  font-size: 14px;
}

.btn_appointment {
  background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
  color: #ffffff;
  margin-top: 80rpx;
}
</style>
